import PropTypes from 'prop-types'
import React, { memo, useState } from 'react';
import { TabsWrapper } from '@/components/section-tabs/style'
import ScrollView from '@/base-ui/scroll-view'

const SectionTabs = memo((props) => {
  const {tabNames = [], tabClcik} = props;
  const [currentIndex, setCurrentIndex] = useState(0);
  const itemClickHandle = (index, item) => {
    setCurrentIndex(index);
    tabClcik(index, item)
  }
  return (
    <TabsWrapper>
      <ScrollView>
        {
          tabNames.map((item, index) => {
            return (
              <div
                key={ item }
                className={ currentIndex === index ? "item active" : 'item' }
                onClick={ () => itemClickHandle(index, item) }>
                { item }</div>
            )
          })
        }
      </ScrollView>
    </TabsWrapper>
  );
});

SectionTabs.propTypes = {
  tabNames: PropTypes.array
}
export default SectionTabs;

